<template>
    <div class="todos-list">
        <ul>
            
            <todos-list-item v-for="item in list" v-bind:key="item.id" v-bind:item="item"></todos-list-item>
      
        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { mapState } from 'vuex'
import TodosListItem from "./todos-list-item.vue"

export default defineComponent({
    setup() {},
    components:{
        TodosListItem
    },
    computed:{
        ...mapState({
            list(state:any){
                if(state && state.todos && state.todos.list){
                    return state.todos.list;
                }else{
                    return [];
                }
            }
        })
    }
})
</script>


<style scoped>

/* main ul li*/
.todo-main {
  margin-left: 0;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

</style>